<template>
  <div class="attendance-check">
    <el-card class="check-card">
      <div class="date-display">
        <h2>{{ currentDate }}</h2>
        <div class="time-display">{{ currentTime }}</div>
      </div>

      <div class="status-display">
        <el-tag :type="checkInStatus.type" size="large">
          {{ checkInStatus.text }}
        </el-tag>
      </div>

      <div class="check-actions">
        <el-button 
          type="primary" 
          :disabled="hasCheckedIn"
          @click="handleCheckIn"
          size="large">
          签到
        </el-button>
        <el-button 
          type="success" 
          :disabled="!hasCheckedIn || hasCheckedOut"
          @click="handleCheckOut"
          size="large">
          签退
        </el-button>
      </div>

      <div class="record-display">
        <p v-if="checkInTime">签到时间：{{ checkInTime }}</p>
        <p v-if="checkOutTime">签退时间：{{ checkOutTime }}</p>
      </div>
    </el-card>
  </div>
</template>

<script>
export default {
  name: 'AttendanceCheck',
  data() {
    return {
      currentDate: '',
      currentTime: '',
      hasCheckedIn: false,
      hasCheckedOut: false,
      checkInTime: '',
      checkOutTime: '',
      timer: null
    }
  },
  computed: {
    checkInStatus() {
      if (!this.hasCheckedIn) {
        return { type: 'warning', text: '未签到' }
      }
      if (!this.hasCheckedOut) {
        return { type: 'success', text: '已签到' }
      }
      return { type: 'info', text: '已签退' }
    }
  },
  methods: {
    updateDateTime() {
      const now = new Date()
      this.currentDate = now.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric',
        weekday: 'long'
      })
      this.currentTime = now.toLocaleTimeString('zh-CN')
    },
    handleCheckIn() {
      this.hasCheckedIn = true
      this.checkInTime = new Date().toLocaleTimeString('zh-CN')
      this.$message.success('签到成功！')
    },
    handleCheckOut() {
      this.hasCheckedOut = true
      this.checkOutTime = new Date().toLocaleTimeString('zh-CN')
      this.$message.success('签退成功！')
    }
  },
  mounted() {
    this.updateDateTime()
    this.timer = setInterval(this.updateDateTime, 1000)
  },
  beforeUnmount() {
    clearInterval(this.timer)
  }
}
</script>

<style scoped>
.attendance-check {
  max-width: 500px;
  margin: 0 auto;
}

.check-card {
  padding: 20px;
  text-align: center;
}

.date-display {
  margin-bottom: 30px;
}

.date-display h2 {
  margin: 0;
  color: #303133;
}

.time-display {
  font-size: 2.5em;
  font-weight: bold;
  color: #409EFF;
  margin: 20px 0;
}

.status-display {
  margin: 20px 0;
}

.check-actions {
  margin: 30px 0;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.record-display {
  margin-top: 20px;
  text-align: left;
  color: #606266;
}

.record-display p {
  margin: 5px 0;
}
</style> 